<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读书APP</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        .app-container {
            max-width: 100%;
            margin: 0 auto;
            position: relative;
            min-height: 100vh;
        }

        /* 通用样式 */
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: #ff6b35;
            color: white;
        }

        .btn-primary:hover {
            background-color: #e55a2b;
        }

        .btn-secondary {
            background-color: #4a9eff;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #3a8deb;
        }

        .btn-outline {
            background-color: transparent;
            border: 1px solid #ddd;
            color: #666;
        }

        .btn-outline:hover {
            background-color: #f0f0f0;
        }

        /* 导航栏 */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            font-size: 20px;
            font-weight: bold;
            color: #ff6b35;
        }

        .nav-icons {
            display: flex;
            gap: 20px;
        }

        .nav-icon {
            font-size: 20px;
            cursor: pointer;
        }

        /* 底部导航 */
        .bottom-nav {
            display: flex;
            justify-content: space-around;
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: white;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
            z-index: 100;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            color: #999;
            font-size: 12px;
        }

        .nav-item.active {
            color: #ff6b35;
        }

        .nav-item i {
            font-size: 20px;
            margin-bottom: 3px;
        }

        /* 页面容器 */
        .page {
            display: none;
            padding: 20px;
            padding-bottom: 70px;
            min-height: calc(100vh - 120px);
        }

        .page.active {
            display: block;
        }

        /* 登录/注册页面 */
        .auth-page {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background: linear-gradient(135deg, #ff6b35, #4a9eff);
        }

        .auth-container {
            background-color: white;
            border-radius: 15px;
            padding: 30px;
            width: 90%;
            max-width: 400px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .auth-logo {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: bold;
            color: #ff6b35;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }

        .auth-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .auth-switch {
            text-align: center;
            margin-top: 20px;
            color: #666;
        }

        .auth-switch a {
            color: #ff6b35;
            text-decoration: none;
            font-weight: bold;
        }

        /* 主页 */
        .welcome-section {
            margin-bottom: 20px;
        }

        .welcome-text {
            font-size: 18px;
            font-weight: bold;
        }

        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0 10px;
        }

        .section-title h2 {
            font-size: 18px;
        }

        .see-all {
            color: #ff6b35;
            text-decoration: none;
            font-size: 14px;
        }

        .book-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }

        .book-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .book-card:hover {
            transform: translateY(-5px);
        }

        .book-cover {
            width: 100%;
            height: 130px;
            background-color: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }

        .book-title {
            padding: 8px;
            font-size: 12px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .horizontal-scroll {
            display: flex;
            overflow-x: auto;
            gap: 15px;
            padding: 5px 0 15px;
            scrollbar-width: none;
        }

        .horizontal-scroll::-webkit-scrollbar {
            display: none;
        }

        /* 书籍详情页面 */
        .book-detail-container {
            background-color: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .book-detail-header {
            position: relative;
        }

        .book-detail-cover {
            width: 100%;
            height: 200px;
            background-color: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }

        .book-detail-info {
            padding: 20px;
        }

        .book-detail-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .book-detail-author {
            color: #666;
            margin-bottom: 10px;
        }

        .book-detail-rating {
            color: #ff9800;
            margin-bottom: 15px;
        }

        .book-detail-description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .book-detail-actions {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .book-detail-actions .btn {
            flex: 1;
            text-align: center;
        }

        .book-detail-meta {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .meta-item {
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 8px;
            text-align: center;
        }

        .meta-label {
            font-size: 12px;
            color: #999;
        }

        .meta-value {
            font-weight: bold;
            margin-top: 3px;
        }

        /* 阅读页面 */
        .reader-container {
            background-color: #f9f4e8;
            height: calc(100vh - 120px);
            display: flex;
            flex-direction: column;
        }

        .reader-header {
            background-color: #f9f4e8;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .reader-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            font-size: 16px;
            line-height: 1.8;
        }

        .reader-footer {
            background-color: #f9f4e8;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .reader-progress {
            flex: 1;
            margin: 0 20px;
        }

        .reader-progress-bar {
            height: 5px;
            background-color: #ddd;
            border-radius: 3px;
            overflow: hidden;
        }

        .reader-progress-fill {
            height: 100%;
            background-color: #ff6b35;
            width: 35%;
        }

        /* 个人中心 */
        .profile-header {
            background-color: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            margin-right: 15px;
        }

        .user-info {
            flex: 1;
        }

        .user-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .user-stats {
            display: flex;
            gap: 15px;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-weight: bold;
            color: #ff6b35;
        }

        .stat-label {
            font-size: 12px;
            color: #999;
        }

        .profile-menu {
            background-color: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .menu-item {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .menu-item:last-child {
            border-bottom: none;
        }

        .menu-item:hover {
            background-color: #f9f9f9;
        }

        /* 搜索页面 */
        .search-container {
            margin-bottom: 20px;
        }

        .search-box {
            display: flex;
            gap: 10px;
        }

        .search-input {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 25px;
            font-size: 16px;
        }

        .search-button {
            padding: 12px 20px;
            background-color: #ff6b35;
            color: white;
            border: none;
            border-radius: 25px;
            cursor: pointer;
        }

        .search-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .search-tag {
            background-color: #f0f0f0;
            padding: 5px 15px;
            border-radius: 15px;
            font-size: 14px;
            cursor: pointer;
        }

        .search-tag:hover {
            background-color: #e0e0e0;
        }

        .search-results {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .search-result-item {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }

        .search-result-item:last-child {
            border-bottom: none;
        }

        .search-result-cover {
            width: 60px;
            height: 80px;
            background-color: #ddd;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 12px;
        }

        .search-result-info {
            flex: 1;
        }

        .search-result-title {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .search-result-author {
            color: #999;
            font-size: 14px;
            margin-bottom: 5px;
        }

        .search-result-description {
            color: #666;
            font-size: 13px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 分类页面 */
        .category-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .category-card {
            background-color: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }

        .category-cover {
            height: 120px;
            background-color: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }

        .category-name {
            padding: 15px;
            text-align: center;
            font-weight: bold;
        }

        /* 书评社区 */
        .review-container {
            background-color: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        .review-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
        }

        .review-form textarea {
            width: 100%;
            height: 100px;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 10px;
            resize: none;
            font-family: inherit;
            margin-bottom: 10px;
        }

        .review-actions {
            display: flex;
            justify-content: space-between;
        }

        .review-list {
            padding: 0 20px;
        }

        .review-item {
            padding: 20px 0;
            border-bottom: 1px solid #eee;
        }

        .review-item:last-child {
            border-bottom: none;
        }

        .review-user {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .review-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            margin-right: 10px;
        }

        .review-user-info {
            flex: 1;
        }

        .review-user-name {
            font-weight: bold;
            font-size: 14px;
        }

        .review-time {
            font-size: 12px;
            color: #999;
        }

        .review-content {
            color: #333;
            line-height: 1.6;
        }

        .review-rating {
            color: #ff9800;
            margin-top: 5px;
        }

        /* 隐藏底部导航的页面 */
        .auth-page ~ .bottom-nav,
        .reader-page.active ~ .bottom-nav {
            display: none;
        }

        /* 响应式设计 */
        @media (min-width: 768px) {
            .book-grid {
                grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            }

            .auth-container {
                max-width: 500px;
            }

            .category-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 登录页面 -->
        <div class="page auth-page active" id="login-page">
            <div class="auth-container">
                <div class="auth-logo">读书APP</div>
                <form id="login-form">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" id="password" placeholder="请输入密码">
                    </div>
                    <div class="auth-buttons">
                        <button type="button" class="btn btn-primary" onclick="showPage('home-page')">登录</button>
                        <button type="button" class="btn btn-outline" onclick="switchToRegister()">注册账户</button>
                    </div>
                </form>
                <div class="auth-switch">
                    <a href="#">忘记密码？</a>
                </div>
            </div>
        </div>

        <!-- 注册页面 -->
        <div class="page auth-page" id="register-page">
            <div class="auth-container">
                <div class="auth-logo">读书APP</div>
                <form id="register-form">
                    <div class="form-group">
                        <label for="reg-username">用户名</label>
                        <input type="text" id="reg-username" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="reg-email">邮箱</label>
                        <input type="email" id="reg-email" placeholder="请输入邮箱">
                    </div>
                    <div class="form-group">
                        <label for="reg-password">密码</label>
                        <input type="password" id="reg-password" placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label for="reg-confirm-password">确认密码</label>
                        <input type="password" id="reg-confirm-password" placeholder="请再次输入密码">
                    </div>
                    <div class="auth-buttons">
                        <button type="button" class="btn btn-primary" onclick="showPage('home-page')">注册</button>
                        <button type="button" class="btn btn-outline" onclick="switchToLogin()">已有账户？立即登录</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 主页 -->
        <div class="page home-page" id="home-page">
            <div class="navbar">
                <div class="logo">读书APP</div>
                <div class="nav-icons">
                    <span class="nav-icon" onclick="showPage('search-page')">🔍</span>
                    <span class="nav-icon" onclick="showPage('profile-page')">👤</span>
                </div>
            </div>

            <div class="welcome-section">
                <div class="welcome-text">欢迎回来，张三</div>
                <div class="section-title">
                    <h2>我的书架</h2>
                    <a href="#" class="see-all" onclick="showPage('category-page')">查看全部</a>
                </div>
                <div class="book-grid">
                    <div class="book-card" onclick="showPage('book-detail-page')">
                        <div class="book-cover">书籍封面</div>
                        <div class="book-title">三体</div>
                    </div>
                    <div class="book-card" onclick="showPage('book-detail-page')">
                        <div class="book-cover">书籍封面</div>
                        <div class="book-title">活着</div>
                    </div>
                    <div class="book-card" onclick="showPage('book-detail-page')">
                        <div class="book-cover">书籍封面</div>
                        <div class="book-title">百年孤独</div>
                    </div>
                    <div class="book-card" onclick="showPage('book-detail-page')">
                        <div class="book-cover">书籍封面</div>
                        <div class="book-title">围城</div>
                    </div>
                </div>
            </div>

            <div class="section-title">
                <h2>最近阅读</h2>
                <a href="#" class="see-all" onclick="showPage('category-page')">查看全部</a>
            </div>
            <div class="horizontal-scroll">
                <div class="book-card" onclick="showPage('reader-page')">
                    <div class="book-cover">书籍封面</div>
                    <div class="book-title">三体</div>
                </div>
                <div class="book-card" onclick="showPage('reader-page')">
                    <div class="book-cover">书籍封面</div>
                    <div class="book-title">白夜行</div>
                </div>
                <div class="book-card" onclick="showPage('reader-page')">
                    <div class="book-cover">书籍封面</div>
                    <div class="book-title">解忧杂货店</div>
                </div>
                <div class="book-card" onclick="showPage('reader-page')">
                    <div class="book-cover">书籍封面</div>
                    <div class="book-title">追风筝的人</div>
                </div>
            </div>

            <div class="section-title">
                <h2>热门推荐</h2>
                <a href="#" class="see-all" onclick="showPage('category-page')">查看全部</a>
            </div>
            <div class="horizontal-scroll">
                <div class="book-card" onclick="showPage('book-detail-page')">
                    <div class="book-cover">书籍封面</div>
                    <div class="book-title">人类简史</div>
                </div>
                <div class="book-card" onclick="showPage('book-detail-page')">
                    <div class="book-cover">书籍封面</div>
                    <div class="book-title">未来简史</div>
                </div>
                <div class="book-card" onclick="showPage('book-detail-page')">
                    <div class="book-cover">书籍封面</div>
                    <div class="book-title">原则</div>
                </div>
                <div class="book-card" onclick="showPage('book-detail-page')">
                    <div class="book-cover">书籍封面</div>
                    <div class="book-title">乌合之众</div>
                </div>
            </div>
        </div>

        <!-- 书籍详情页面 -->
        <div class="page book-detail-page" id="book-detail-page">
            <div class="navbar">
                <div class="nav-icon" onclick="showPage('home-page')">←</div>
                <div class="logo">书籍详情</div>
                <div class="nav-icon">⋯</div>
            </div>

            <div class="book-detail-container">
                <div class="book-detail-header">
                    <div class="book-detail-cover">书籍封面</div>
                </div>
                <div class="book-detail-info">
                    <div class="book-detail-title">三体</div>
                    <div class="book-detail-author">作者：刘慈欣</div>
                    <div class="book-detail-rating">★★★★★ 4.8 (1280人评)</div>
                    <div class="book-detail-description">
                        文化大革命如火如荼进行的同时，军方探寻外星文明的绝秘计划“红岸工程”取得了突破性进展。但在按下发射键的那一刻，历经劫难的叶文洁没有意识到，她彻底改变了人类的命运。地球文明向宇宙发出的第一声啼鸣，以太阳为中心，以光速向宇宙深处飞驰……
                    </div>
                    <div class="book-detail-actions">
                        <button class="btn btn-primary" onclick="showPage('reader-page')">开始阅读</button>
                        <button class="btn btn-outline">加入书架</button>
                    </div>
                    <div class="book-detail-meta">
                        <div class="meta-item">
                            <div class="meta-label">状态</div>
                            <div class="meta-value">完结</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">类型</div>
                            <div class="meta-value">科幻</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">章节</div>
                            <div class="meta-value">112章</div>
                        </div>
                        <div class="meta-item">
                            <div class="meta-label">字数</div>
                            <div class="meta-value">32.6万</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="section-title" style="margin-top: 20px;">
                <h2>热门书评</h2>
                <a href="#" class="see-all" onclick="showPage('community-page')">查看全部</a>
            </div>
            <div class="review-container">
                <div class="review-item">
                    <div class="review-user">
                        <div class="review-avatar">头像</div>
                        <div class="review-user-info">
                            <div class="review-user-name">读书爱好者</div>
                            <div class="review-time">2小时前</div>
                        </div>
                        <div class="review-rating">★★★★★</div>
                    </div>
                    <div class="review-content">
                        这是一部非常经典的科幻小说，想象力丰富，情节引人入胜。刘慈欣用他独特的视角为我们展现了一个宏大的宇宙世界。
                    </div>
                </div>
            </div>
        </div>

        <!-- 阅读页面 -->
        <div class="page reader-page" id="reader-page">
            <div class="reader-container">
                <div class="reader-header">
                    <div class="nav-icon" onclick="showPage('book-detail-page')">←</div>
                    <div class="book-title">三体 - 第一章</div>
                    <div class="nav-icon">⋮</div>
                </div>
                <div class="reader-content">
                    <p>　　叶文洁在天文台的监控室里，凝视着屏幕上跳动的数据。红岸基地已经运行了十年，但她知道，真正的突破即将来临。</p>
                    <p>　　窗外，夜空中的繁星闪烁着神秘的光芒。她想起了父亲，想起了那个疯狂的年代，想起了自己立下的誓言。</p>
                    <p>　　"叶研究员，信号已经准备就绪。"助手小王走进监控室，神情紧张地报告。</p>
                    <p>　　叶文洁深吸一口气，她的手缓缓移向控制台上的红色按钮。这一刻，她知道，人类的命运将从此改变。</p>
                    <p>　　"开始发送信号。"她的声音平静而坚定。</p>
                    <p>　　随着按钮的按下，一道强烈的电磁波以光速向宇宙深处飞去。这是地球文明向宇宙发出的第一声啼鸣，也是叶文洁对人类未来的最后审判。</p>
                    <p>　　在遥远的太空中，一个古老的文明正在监听着来自各个星系的声音。当他们接收到这个信号时，整个文明都为之震动。</p>
                    <p>　　"有趣的信号，"三体世界的监听员报告给他们的君主，"来自一个刚刚踏入文明门槛的星球。"</p>
                    <p>　　君主沉默了片刻，然后下达了命令："准备接触。"</p>
                    <p>　　就这样，两个相距四光年的文明，因为一个女人的决定而产生了交集。而这，仅仅是故事的开始...</p>
                </div>
                <div class="reader-footer">
                    <div class="nav-icon">⏮</div>
                    <div class="reader-progress">
                        <div class="reader-progress-bar">
                            <div class="reader-progress-fill"></div>
                        </div>
                    </div>
                    <div class="nav-icon">⏭</div>
                </div>
            </div>
        </div>

        <!-- 个人中心 -->
        <div class="page profile-page" id="profile-page">
            <div class="navbar">
                <div class="logo">个人中心</div>
                <div class="nav-icons">
                    <span class="nav-icon">⚙️</span>
                </div>
            </div>

            <div class="profile-header">
                <div class="avatar">头像</div>
                <div class="user-info">
                    <div class="user-name">张三</div>
                    <div class="user-stats">
                        <div class="stat-item">
                            <div class="stat-value">128</div>
                            <div class="stat-label">书架</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">42</div>
                            <div class="stat-label">在读</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">28</div>
                            <div class="stat-label">读完</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="profile-menu">
                <div class="menu-item" onclick="showPage('home-page')">
                    <span>我的书架</span>
                    <span>▶</span>
                </div>
                <div class="menu-item" onclick="showPage('community-page')">
                    <span>我的书评</span>
                    <span>▶</span>
                </div>
                <div class="menu-item">
                    <span>阅读统计</span>
                    <span>▶</span>
                </div>
                <div class="menu-item">
                    <span>账户设置</span>
                    <span>▶</span>
                </div>
                <div class="menu-item">
                    <span>消息通知</span>
                    <span>▶</span>
                </div>
                <div class="menu-item">
                    <span>帮助与反馈</span>
                    <span>▶</span>
                </div>
            </div>
        </div>

        <!-- 搜索页面 -->
        <div class="page search-page" id="search-page">
            <div class="navbar">
                <div class="nav-icon" onclick="showPage('home-page')">←</div>
                <div class="search-container">
                    <div class="search-box">
                        <input type="text" class="search-input" placeholder="搜索书籍、作者">
                        <button class="search-button">搜索</button>
                    </div>
                </div>
                <div class="nav-icon"></div>
            </div>

            <div class="search-tags">
                <div class="search-tag">科幻</div>
                <div class="search-tag">文学</div>
                <div class="search-tag">历史</div>
                <div class="search-tag">推理</div>
                <div class="search-tag">哲学</div>
            </div>

            <div class="section-title">
                <h2>搜索结果</h2>
            </div>

            <div class="search-results">
                <div class="search-result-item" onclick="showPage('book-detail-page')">
                    <div class="search-result-cover">封面</div>
                    <div class="search-result-info">
                        <div class="search-result-title">三体</div>
                        <div class="search-result-author">刘慈欣 著</div>
                        <div class="search-result-description">文化大革命如火如荼进行的同时，军方探寻外星文明的绝秘计划“红岸工程”取得了突破性进展...</div>
                    </div>
                </div>
                <div class="search-result-item" onclick="showPage('book-detail-page')">
                    <div class="search-result-cover">封面</div>
                    <div class="search-result-info">
                        <div class="search-result-title">三体Ⅱ·黑暗森林</div>
                        <div class="search-result-author">刘慈欣 著</div>
                        <div class="search-result-description">被困在三体世界的地球人通过“万有引力”号向宇宙广播了三体世界的位置...</div>
                    </div>
                </div>
                <div class="search-result-item" onclick="showPage('book-detail-page')">
                    <div class="search-result-cover">封面</div>
                    <div class="search-result-info">
                        <div class="search-result-title">三体Ⅲ·死神永生</div>
                        <div class="search-result-author">刘慈欣 著</div>
                        <div class="search-result-description">太阳系的二维化开始了，程心和艾AA踏上了宇宙探索的征程...</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分类页面 -->
        <div class="page category-page" id="category-page">
            <div class="navbar">
                <div class="nav-icon" onclick="showPage('home-page')">←</div>
                <div class="logo">书籍分类</div>
                <div class="nav-icon"></div>
            </div>

            <div class="category-grid">
                <div class="category-card" onclick="showPage('search-page')">
                    <div class="category-cover">分类封面</div>
                    <div class="category-name">科幻小说</div>
                </div>
                <div class="category-card" onclick="showPage('search-page')">
                    <div class="category-cover">分类封面</div>
                    <div class="category-name">文学经典</div>
                </div>
                <div class="category-card" onclick="showPage('search-page')">
                    <div class="category-cover">分类封面</div>
                    <div class="category-name">历史人文</div>
                </div>
                <div class="category-card" onclick="showPage('search-page')">
                    <div class="category-cover">分类封面</div>
                    <div class="category-name">推理悬疑</div>
                </div>
                <div class="category-card" onclick="showPage('search-page')">
                    <div class="category-cover">分类封面</div>
                    <div class="category-name">经济管理</div>
                </div>
                <div class="category-card" onclick="showPage('search-page')">
                    <div class="category-cover">分类封面</div>
                    <div class="category-name">哲学宗教</div>
                </div>
            </div>
        </div>

        <!-- 书评社区 -->
        <div class="page community-page" id="community-page">
            <div class="navbar">
                <div class="nav-icon" onclick="showPage('home-page')">←</div>
                <div class="logo">书评社区</div>
                <div class="nav-icon">+</div>
            </div>

            <div class="review-container">
                <div class="review-header">
                    <form class="review-form">
                        <textarea placeholder="写书评..."></textarea>
                        <div class="review-actions">
                            <div>⭐⭐⭐⭐⭐</div>
                            <button type="button" class="btn btn-primary">发表</button>
                        </div>
                    </form>
                </div>
                <div class="review-list">
                    <div class="review-item">
                        <div class="review-user">
                            <div class="review-avatar">头像</div>
                            <div class="review-user-info">
                                <div class="review-user-name">读书爱好者</div>
                                <div class="review-time">2小时前</div>
                            </div>
                            <div class="review-rating">★★★★★</div>
                        </div>
                        <div class="review-content">
                            《三体》是一部非常经典的科幻小说，想象力丰富，情节引人入胜。刘慈欣用他独特的视角为我们展现了一个宏大的宇宙世界。读完这本书，我对宇宙和人类文明有了全新的思考。
                        </div>
                    </div>
                    <div class="review-item">
                        <div class="review-user">
                            <div class="review-avatar">头像</div>
                            <div class="review-user-info">
                                <div class="review-user-name">科幻迷</div>
                                <div class="review-time">5小时前</div>
                            </div>
                            <div class="review-rating">★★★★☆</div>
                        </div>
                        <div class="review-content">
                            三体的世界观设定非常宏大，物理概念也很硬核。不过个人觉得第二部的节奏有些慢，相比之下第一部和第三部更吸引人。
                        </div>
                    </div>
                    <div class="review-item">
                        <div class="review-user">
                            <div class="review-avatar">头像</div>
                            <div class="review-user-info">
                                <div class="review-user-name">文学青年</div>
                                <div class="review-time">1天前</div>
                            </div>
                            <div class="review-rating">★★★★★</div>
                        </div>
                        <div class="review-content">
                            这本书不仅仅是科幻小说，更是对人类文明的深刻反思。叶文洁的选择虽然可以理解，但带来的后果却是整个地球文明都无法承受的。
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item active" onclick="showPage('home-page')">
                <div>🏠</div>
                <div>首页</div>
            </div>
            <div class="nav-item" onclick="showPage('category-page')">
                <div>📚</div>
                <div>分类</div>
            </div>
            <div class="nav-item" onclick="showPage('home-page')">
                <div>📖</div>
                <div>书架</div>
            </div>
            <div class="nav-item" onclick="showPage('profile-page')">
                <div>👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <script>
        // 页面切换功能
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 显示指定页面
            document.getElementById(pageId).classList.add('active');
            
            // 更新底部导航状态
            if (pageId !== 'reader-page' && pageId !== 'login-page' && pageId !== 'register-page') {
                document.querySelectorAll('.nav-item').forEach(item => {
                    item.classList.remove('active');
                });
                
                // 根据页面设置底部导航激活状态
                let index = 0;
                switch(pageId) {
                    case 'home-page':
                        index = 0;
                        break;
                    case 'category-page':
                        index = 1;
                        break;
                    case 'profile-page':
                        index = 3;
                        break;
                }
                
                document.querySelectorAll('.nav-item')[index].classList.add('active');
            }
        }

        // 登录注册切换
        function switchToRegister() {
            document.getElementById('login-page').classList.remove('active');
            document.getElementById('register-page').classList.add('active');
        }

        function switchToLogin() {
            document.getElementById('register-page').classList.remove('active');
            document.getElementById('login-page').classList.add('active');
        }

        // 模拟点击事件
        document.addEventListener('DOMContentLoaded', function() {
            // 为书架书籍添加点击事件
            document.querySelectorAll('.book-card').forEach(card => {
                card.addEventListener('click', function() {
                    // 这里可以添加跳转到书籍详情的逻辑
                });
            });
        });
    </script>
</body>
</html>